<template>
<div class="formDiv">
  <div>
  <form class="formstyle">
    <group :title="page.basic">
      <x-input :title="page.nickname" v-model="register.nickname" placeholder="placeholder.nickname" :min="4" :max="12">
        <i class="iconfont icon-dengluyonghuming formicon" slot="label"></i>
      </x-input>
      <x-input title="page.account" v-model="register.account" :placeholder="placeholder.account" :min="8" :max="15">
        <i class="iconfont icon-card2 formicon" slot="label"></i>
      </x-input>
    </group>
    <group :title="page.password">
      <x-input type="password" :placeholder="placeholder.password" v-model="register.password" :min="8" :max="15" @on-change="checkPwd">
        <i class="iconfont icon-mima formicon" slot="label"></i>
      </x-input>
        <x-input v-model="register.password2" type="password" :min="8" :max="16" novalidate :icon-type="iconPwd" :placeholder="placeholder.password2" @on-change='checkPwd'>
        <i class="iconfont icon-mima formicon" slot="label"></i>
      </x-input>
    </group>

    <group :title="page.optional">
      <x-input :title="page.email" v-model="register.email" name="email" :placeholder="placeholder.email" ref="email" is-type="email">
        <i class="iconfont icon-youxiang formicon" slot="label"></i>
      </x-input>
      <x-input :title="page.invcode" :placeholder='placeholder.invcode' mask="AAAA-SSSS-AAAA-SSSS" v-model="register.invcode"  ref="mobile" :max="19">
        <i class="iconfont icon-yaoqingma formicon" slot="label"></i>
      </x-input>
    </group>

    <group :title="page.titel_tel">
      <x-input :title="page.tel" mask="999 9999 9999" v-model="register.tel" :placeholder='placeholder.tel'  ref="mobile" :max="13" is-type="china-mobile">
        <i class="iconfont icon-shoujihao formicon" slot="label"></i>
      </x-input>
      <x-input :title="page.vcode" class="weui-vcode">
        <x-button slot="right" type="primary" mini>{{page.cend_vcode}}</x-button>
      </x-input>
    </group>

  </form>
  <div v-transfer-dom>
    <toast :time='1000' :is-show-mask='true' :type='reg_tip.tipType' v-model="reg_tip.show">{{reg_tip.tip}}</toast>
  </div>
  <div style="padding:15px;">
    <x-button @click.native="check_reg" :show-loading='reg_loading' class="register_button" type="primary">
      <i class="iconfont icon-zhuce"></i>
    </x-button>
  </div>
  </div>
</div>
</template>

<script>
import { XInput, Group } from 'vux'
export default {
  data() {
    return {
      iconPwd: '',
      reg_loading: false,
      placeholder: {
        nickname: '请输入昵称',
        account: '请输入账号(8-15)',
        password: '请输入密码(8-15)',
        password2: '请再次输入密码',
        email: '请输入邮箱',
        invcode: '邀请码(大量奖励)',
        tel: '请输入您的手机号'
      },
      page: {
        titel: '注册账号',
        back: '返回',
        basic: '基本信息',
        nickname: '昵称',
        account: '账号',
        password: '密码',
        optional: '选填',
        email: '邮箱',
        invcode: '邀请码',
        titel_tel: '为了账号安全,请绑定您的手机号',
        tel: '手机号',
        vcode: '请输入验证码',
        cend_vcode: '发送验证码'
      },
      register: {
        nickname: '天空那片蓝',
        account: 'skybluefeet',
        password: '123456789',
        password2: '123456789',
        email: 'xxxx@xxx.xxx',
        tel: '13131503525',
        invcode: ''
      },
      reg_tip: {
        show: false,
        tipType: '',
        tip: ''
      }
    }
  },
  components: {
    XInput,
    Group
  },
  methods: {
    // 注册提示
    toast_reg(type, text) {
      this.reg_tip.show = true
      this.reg_tip.tipType = type
      this.reg_tip.tip = text
      this.reg_loading = false
    },
    // 两步密码验证
    checkPwd() {
      const one = this.register.password
      const two = this.register.password2
      if (one !== two) {
        this.iconPwd = 'error'
      } else if (one === two && two !== '' && one.length >= 8) {
        this.iconPwd = 'success'
      } else if (one === two && two !== '' && one.length < 8) {
        this.iconPwd = 'error'
      } else {
        this.iconPwd = ''
      }
    },
    // 路由返回
    onClickLeft() {
      this.$router.goBack()
    },

    // 注册
    to_reg() {
      this.$post(
        '/user/register',
        {
          nickname: this.register.nickname,
          account: this.register.account,
          password: this.register.password,
          tel: this.register.tel,
          email: this.register.email,
          invcode: this.register.invcode
        },
        '请求失败'
      ).then(res => {
        if (res.data.code == 5) {
          this.toast_reg('cancel', res.data.msg)
          console.log(res.data)
        } else if (res.data.code === 156) {
          this.toast_reg('success', res.data.msg)
          console.log(res.data)
        }
      })
    },
    // 注册前检查
    check_reg() {
      const isInv = this.register.invcode.length
      this.reg_loading = true
      if (this.register.nickname.length < 5) {
        this.toast_reg('warn', '昵称过短!')
      } else if (this.register.account.length < 8) {
        this.toast_reg('warn', '账号过短!')
      } else if (this.register.password.length < 8) {
        this.toast_reg('warn', '密码不合格!')
      } else if (this.iconPwd !== 'success') {
        this.toast_reg('warn', '密码验证错误!')
      } else if (this.register.tel.length !== 13) {
        this.toast_reg('warn', '手机号不合格!')
      } else if (isInv !== 0 && isInv < 19) {
        this.toast_reg('warn', '邀请码错误!')
      } else {
        this.to_reg()
      }
    }
  }
}
</script>
<style scoped>
.formicon{
  font-size: 20px;
  padding-right:20px;
}

.formstyle {
  margin-top:20px;
  background-color: #efeff4;
  padding: 20px 0;
  border-radius: 10px;
}

.myheader {
  background-color: #26a2ff;
}

.red {
  color: red;
}

.green {
  color: green;
}
</style>
